<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router3.js"></script>
</head>
<body>

<div id="app">
    <!--    路由出口-->
    <router-view></router-view>
    <hr>
    <h2>路由的切换方式</h2>
    <h2>router-link实现路由的切换 to = string </h2>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/login">login</router-link>
    <router-link to="/register">register</router-link>

    <h2>router-link实现路由的切换 to = {path} </h2>
    <router-link :to="{path:'/login'}">login</router-link>
    <router-link :to="{path:'/register'}">register</router-link>

    <h2>router-link实现路由的切换 to = {name}  命名路由 实现解耦 便于代码维护</h2>
    <router-link :to="{name:'login'}">login</router-link>
    <router-link :to="{name:'register'}">register</router-link>


    <h2>编程式路由切换 javascript</h2>
     <button @click="login">login</button>
     <button @click="register">register</button>

</div>

<script>

    // 登录组件
    let Login = {
        template: `
            <div>
                <form action="#" method="post">
                    <h2>欢迎登录</h2>
                    <p>
                        <input type="text" name="username" id="username" placeholder="请输入用户名">
                    </p>
                    <p>
                        <input type="password" name="password" id="password" placeholder="请输入密码">
                    </p>
                    <p>
                        <input type="submit" value="立即登录">
                    </p>
                </form>
            </div>
        `
    }

    // 注册组件
    let Register = {
        template: `
            <div>
                <form action="#" method="post">
                    <h2>欢迎注册</h2>
                    <p>
                        <input type="text" name="username" id="username" placeholder="请输入用户名">
                    </p>
                    <p>
                        <input type="password" name="password" id="password" placeholder="请输入密码">
                    </p>
                    <p>
                        <input type="submit" value="立即注册">
                    </p>
                </form>
            </div>
        `
    }

    // 页面找不到404 组件
    let  File404 = {
        template:'<h2>页面找不到了,404</h2>'
    }

    // 2.定义路由  路由列表     路径 -> 组件  关系  path: 路径  component：组件
    const routes = [
        {path: '/', redirect:'/login'},  //  重定向
        {path: '/login', component: Login,name:'login'},
        {path: '/register', component: Register,name:'register'},
        {path: '/**', component: File404}  //  404  路由需要放置在路由列表的最后
    ]

    //  3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })


    let vm = new Vue({
        el: '#app',
        methods:{
            login(){  // 路由跳转  编程式   this.$router   路由对象  push(string)  push({})
                this.$router.push("/login")
            },
            register(){
                // this.$router.push({path:'/register'})
                this.$router.push({name:'register'})
            }
        },
        router
    })
</script>
</body>
</html>